<template>
    <q-page>
        <q-inner-loading visible v-if="list.length == 0">
            <q-spinner-gears size="50px" color="primary" />
            <b class="text-primary">数据加载中...</b>
        </q-inner-loading>

        <!-- create new -->
    <q-btn round color="primary" class="fixed" icon="loop" size="lg"
      style="right: 15px; bottom: 50px; z-index:100000" @click="loadData(1)"/>

    <q-list>  
      <q-item style="padding:0;">
        <q-search icon="mdi-account-search" class="full-width no-shadow" :value="filter" 
            inverted-light color="grey-2"
          placeholder="按关键字过滤" autofocus="true"
          @input="filterPosts" @clear="filterPosts('')" clearable/>
      </q-item>
    </q-list>  

        <q-infinite-scroll :handler="loadData" ref="scroll">
            <q-list separator :no-border="$q.platform.is.mobile" :style="$q.platform.is.desktop?'padding:8px;':''">

                <q-collapsible v-for="item in list" :key="'plus_topic_'+item.id">
                    <template slot="header">
                        <q-item-main>
                            <q-item-tile label>{{item.nickName}}</q-item-tile>
                            <q-item-tile sublabel>{{item.createTime.substring(0,19)}}</q-item-tile>
                            <q-item-tile sublabel>{{item.content.substring(0,10)}}</q-item-tile>
                        </q-item-main>
                        <q-item-side right v-if="item.tag != 'DEL'" >
                            <div><q-chip dense square color="primary" v-if="item.tag=='BEST'">精华</q-chip></div>
                            <div><q-chip dense square color="blue" v-if="item.rank == -10000">置顶</q-chip></div>
                            <div><q-chip dense square color="black" v-if="item.alarmCount>0">投诉:{{item.alarmCount}}</q-chip></div>
                        </q-item-side>
                        <!-- action list -->
                        <q-item-side right>
                            <q-btn-dropdown dense outline @click.stop color="primary" label="操作" v-if="item.tag != 'DEL'">
                                <!-- 下拉内容 -->
                                <q-list separator class="q-pa-none" style="min-width:80px;">
                                    <q-item class="q-pa-none" v-if="item.tag != 'BEST'">
                                        <q-btn class="full-width" dense flat color="primary" v-close-overlay
                                            label="加精" @click="bestItem(item)" />
                                    </q-item>
                                    <q-item class="q-pa-none" v-if="item.tag == 'BEST'">
                                        <q-btn class="full-width" dense flat color="black" v-close-overlay
                                            label="取消加精" @click="unbestItem(item)" />
                                    </q-item>
                                    <q-item class="q-pa-none" v-if="item.rank != -10000">
                                        <q-btn class="full-width" dense flat color="primary" v-close-overlay
                                            label="置顶" @click="topItem(item)" />
                                    </q-item>
                                    <q-item class="q-pa-none" v-if="item.rank == -10000">
                                        <q-btn class="full-width" dense flat color="black" v-close-overlay
                                            label="取消置顶" @click="untopItem(item)" />
                                    </q-item>
                                    <q-item class="q-pa-none">
                                        <q-btn class="full-width" dense flat color="black" v-close-overlay
                                            label="删除" @click="delItem(item)" />
                                    </q-item>
                                </q-list>
                            </q-btn-dropdown>
                            <q-chip dense square color="black" v-if="item.tag == 'DEL'">已删除</q-chip>
                        </q-item-side>
                    </template>
                    <q-list no-border separator>
                        <q-item>
                            发帖内容：{{item.content}}
                        </q-item>
                        <q-item>
                            所属话题：{{item.parentContent}}
                        </q-item>
                        <q-item v-if="item.alarmCount>0">
                            投诉({{item.alarmCount}}条)：{{item.alarm}}
                        </q-item>
                        <q-item v-if="item.alarmCount>0">
                            投诉用户：{{item.alarmUser}}
                        </q-item>
                    </q-list>
                </q-collapsible>

            </q-list>
        </q-infinite-scroll>
    </q-page>
</template>

<script>
export default {
  name: 'PagePlusTopicTicket',
  data() {
    return {
      filter: '',
      limit: 20,
      list: []
    }
  },
  mounted() {
    this.$api.ui.pageTitle = 'PLUS转票管理';
    //this.loadUserTrend();
    this.$refs.scroll.loadMore();
  },
  methods: {
    filterPosts(val) {
        if(this.filter != val) {
      this.filter = val;
       this.loadData(1);
        }
    },
    loadData(page, done) {
        let me = this;
        this.$api.plus.loadTickets(me.filter, me.limit*(page-1), me.limit, res=>{
            let data = res.data;
            if(page == 1) {
                me.list = data.model;
            } else {
                data.model.forEach(item=>{
                    me.list.push(item);
                });
            }
            if(done) {
                done(data.model.length < me.limit);
            }
        });
    },
    delItem(item) {
        let me = this;
        this.$api.plus.delPost(item.id, res=>{
            item.tag = 'DEL'
        });
    },
    bestItem(item) {
        let me = this;
        this.$api.plus.bestPost(item.id, res=>{
            item.tag = 'BEST';
        });
    },
    unbestItem(item) {
        let me = this;
        this.$api.plus.unbestPost(item.id, res=>{
            item.tag = '';
        });
    },
    topItem(item) {
        let me = this;
        this.$api.plus.topPost(item.id, res=>{
            item.rank = -10000;
        });
    },
    untopItem(item) {
        let me = this;
        this.$api.plus.untopPost(item.id, res=>{
            item.rank = 0;
        });
    }
  }
}
</script>

<style>
i.q-icon {
    display:block !important;
}
main div.q-btn-inner>i:last-child {
  display:none;
}

.q-input-chips .q-chip {
  margin: 5px;
}
</style>
